@import './components.scss';
@import 'view-design/dist/styles/iview.css';
@import 'animate.scss';
@import 'ws.scss';
@import 'homepage.scss';
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei";
    font-style: normal;
    font-weight: normal;
}

html,
body,
#app {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 12px;
}
img{
    cursor: pointer !important;
}
li {
    list-style: none;
}

em,
i {
    font-style: italic;
}

// 颜色群
$header-height:74px;
$head-color:#fff;
$border-color:#d6d7dc;
$head-fontColor: #434b60;
$head-admin-fontColor:#fff;
$normal-fontColor:#fff;
$active-color:#fff;
$openUl-color:#434b60;
$hover-li-color:#615fbb;
// $main-color:#e1e0ff;
$aside-color:#fff;
$hover-color:#f2f2f2;
$fontHover-color:#0066cc;
$nav-fontColor:#000000;
$main-color:#636980;
// $hover-li-color:#625ebc;

/*
for example
mt-5 margin-top:5px;
mg-5 margin:5px;
*/

@for $i from 5 through 20 {
    .mt-#{$i} {
        margin-top:#{$i}px;
    }
    .ml-#{$i} {
        margin-left:#{$i}px;
    }
    .mr-#{$i} {
        margin-right:#{$i}px;
    }
    .mb-#{$i} {
        margin-bottom:#{$i}px;
    }
    .mtb-#{$i} {
        margin:#{$i}px 0;
    }
    .mlr-#{$i} {
        margin:0 #{$i}px;
    }
    .mg-#{$i} {
        margin:#{$i}px;
    }
    $i:$i+5
}

::-webkit-scrollbar {
    width: 5px; 
    height: 10%
  }
  
  ::-webkit-scrollbar-track {
    background-color: #f1f1f1;  
     border-radius: 10px;
  
  } 

  ::-webkit-scrollbar-thumb:hover {
    background-color: #A4A9C1;
}
  /* 滚动条的滑轨背景颜色 */
    ::-webkit-scrollbar-thumb {
    background-color: #E5E5E5;
    border-radius: 10px;
  }
@for $i from 5 through 20 {
    .pt-#{$i} {
        padding-top:#{$i}px;
    }
    .pl-#{$i} {
        padding-left:#{$i}px;
    }
    .pr-#{$i} {
        padding-right:#{$i}px;
    }
    .pb-#{$i} {
        padding-bottom:#{$i}px;
    }
    .ptb-#{$i} {
        padding:#{$i}px 0;
    }
    .plr-#{$i} {
        padding:0 #{$i}px;
    }
    .pd-#{$i} {
        padding:#{$i}px;
    }
    $i:$i+5
}

// 头部
.head {
    display: flex;
    align-items: center;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: $header-height;
    line-height: $header-height;
    background-color: $head-color;
    border-bottom: 1px solid #d6d7dc;
    .head-mt{
        width: 190px;
        height: 40px;
    }
    .head-img{
        display: flex;
        margin-left: 125px;
        .imgri{
            margin-left: 50px;
        }
    }
    h3 {
        font-size: 26px;
        color: $head-fontColor;
        display: inline-block;
        text-align: left;
        padding: 0 20px;
        cursor: pointer;
    }
}

.admin-btn-ul {
    height: 100%;
    display: flex;
    position: absolute;
    right: 30px;
    top: 0;
    .admin-li {
        display: flex;
        align-items: center;
        height: 100%;
        .admin_img{
            display: flex;
            img{
                width: 32px;
                height: 32px;
                border-radius: 30px;
            }

        }
        .admin_selectimg{
            width: auto;
            height: auto;
        }
        .admin_name {
            margin: 0 10px 0 10px;
            display: flex;
            flex-direction: column;
            span{
                line-height: initial;
            }
            .admin_up{
                font-size: 14px;
                color: #060606;
            }
            .admin-role {
                font-size: 12px;
                color: #6E747F;
            }
        }
    }
    i {
        margin: 0 0 0 10px;
    }
    &:hover {
        .admin-menu-ul {
            display: block;
            z-index: 10;
        }
    }
}
.admin-menu-ul {
    z-index: 1;
    display: none;
    height: auto;
    top: 70px;
    position: absolute;
    width: 100%;
    background-color: #c1c1c1;
    text-align: center;
    li {
        display: block;
        font-size: 14px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: $nav-fontColor;
        clear: both;
        white-space: nowrap;
        &:hover {
            background-color: $hover-color;
            color: #5856cf;
        }
    }
}


// 左侧导航
.aside {
    width: 250px;
    position: absolute;
    bottom: 0;
    left: 0;
    top: $header-height;
    padding-bottom: 0 10px 0 0;
    background-color: $aside-color;
    overflow-x: hidden;
    overflow-y: auto;
}

.ivu-table {
    font-size: 12px;
}

.ivu-btn-small {
    font-size: 12px;
}

.ivu-menu {
    height: 100%;
    width: 100% !important;
    display: flex;
    justify-content: center;    
    background-color: $aside-color;
    font-size: 16px;
    z-index: 99;
    .my-viewside{
        width: 232px;
        span{
            margin-left: 10px;
        }
    }
}
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu){
    .showimg{
        top: 22px;
        left: 33px;
        position: absolute;        
        background: url(../../assets/images/peach-svg/menu-icon/mu12.svg)no-repeat 0 0;
    }
}
.showimg{
    top: 22px;
    left: 33px;
    position: absolute;    
    // width: 6px;
    // height: 6px;
    background: url(../../assets/images/peach-svg/menu-icon/mu11.svg)no-repeat 0 0;
} 
.ivu-menu-submenu-title{
    display: flex;
    align-items: center;
}
.ivu-menu-submenu-title span {
    display: flex;
    align-items: center;
    width: 120px;
    height: 100%;
    margin-left: 10px;
}


// 右边内容
.content {
    display: block;
    position: absolute;
    top: $header-height;
    left: 0;
    right: 0;
    bottom: 0;
    margin-left: 240px;
    background: #F5F6FA;
}
.box-name{
    width: 100%;
    height: 84px;
    display: flex;
    align-items: center;
    margin-left: 28px;
    span{
        color: #060606;
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 6px;
    }

}
.box-content {
    height: 100%;
}
.bg-purple .ivu-menu-vertical {
    .my-viewside {
        .ivu-menu-opened {
            .ivu-menu-submenu-title{
                color: #fff !important;
                font-size: 14px !important;
                font-family: Microsoft YaHei UI !important;
                background: #0559FD !important;
                border-radius: 4px;
                height: 50px;
                .chilicon{
                    transform: translateX(-500px);
                    filter: drop-shadow(#FFFFFF 500px 0); 
                }
                .touch{
                    height: 100%;
                    display: flex;
                    align-items: center;
                }
            }
            
        }
    }
} 
.ivu-menu-item{
    .ivu-menu-item-active{
        .ivu-menu-item-selected{
            // .opp{
            //     background: url(../../assets/images/peach-svg/menu-icon/mu11.svg) no-repeat 0 0;
            // }
        }
    } 
} 
.opp{

}
.chilicon {
    transform: translateX(-500px);
    filter: drop-shadow(#6E747F 500px 0);        
}
.chilicon2 {
    transform: translateX(-500px);
    filter: drop-shadow(#FFFFFF 500px 0);        
}
.ivu-menu-vertical .ivu-menu-submenu-title {
    color: #6E747F !important;
    font-size: 14px !important;
    font-family: Microsoft YaHei UI !important;
    overflow: hidden;
    height: 50px;
    .touch{
        height: 100%;
        display: flex;
        align-items: center;
    }
}
.ivu-menu-submenu-title span{
}
.box-wrap {
    width: 100%;
    height: 100%;
    min-width: 1070px;
    padding: 0 28px 0 28px;
    .staticData{
        background: #FFFFFF;
        position: absolute;
        bottom: 28px;
        top: 242px;
        right: 28px;
        left: 28px;
        border-radius: 24px;
        padding: 28px;
        width: auto !important;
        .vxe-grid{
            height: 100%;

            .vxe-grid--toolbar-wrapper{
                display: none;
            }
            .vxe-table{
                height: 100%;

                .vxe-table--render-wrapper{
                    height: 100%;
                    .vxe-table--main-wrapper{
                        height: 100%;
                        .vxe-table--body-wrapper{
                            height: 85% !important;
                            overflow-y: scroll;
                            overflow-x: hidden;
                        }
                    }
                }
            }
            .vxe-grid--pager-wrapper{
                position: absolute;
                bottom: 0;
            }
        }
    }
}
.box-wrap-total {
    width: 100%;
    height: 100%;
    min-width: 1070px;
    padding: 0 28px 0 28px;
    .staticData{
        background: #FFFFFF;
        position: absolute;
        bottom: 28px;
        top: 202px;
        right: 28px;
        left: 28px;
        border-radius: 24px;
        padding: 28px;
        width: auto !important;
        .vxe-grid{
            height: 100%;

            .vxe-grid--toolbar-wrapper{
                display: none;
            }
            .vxe-table{
                height: 100%;

                .vxe-table--render-wrapper{
                    height: 100%;
                    .vxe-table--main-wrapper{
                        height: 100%;
                        .vxe-table--body-wrapper{
                            height: 75% !important;
                            overflow-y: scroll;
                            overflow-x: hidden;
                        }
                        .vxe-table--footer-wrapper.body--wrapper{
                            width: 100%;
                            height: 62px;
                            display: flex;
                            align-items: center;
                            background: unset;
                            border: 0;
                        }
                    }
                }
            }
            .vxe-grid--pager-wrapper{
                position: absolute;
                bottom: 0;
            }
        }
    }
}
.el-input.is-disabled .el-input__inner{
    border-radius: 8px !important;
}
.el-input--suffix .el-input__inner{
    border-radius: 8px !important;
}
.ivu-col-span-15{
    width: 100%;
}

.box-wrap2 {
    width: 100%;
    height: 100%;
    min-width: 1070px;
    padding: 0 28px 0 28px;
    
    .box-operation2{
        overflow: hidden;
        position: absolute;
        right: 124px;
        left: 28px;
        height: 40px;
        background: #FFFFFF;
        border-radius: 8px;
        .box-num{
            height: 100%;
            .box-selectnum{
                height: 100%;
                width: 100%;
                .el-select{
                    height: 100%;
                    width: 100%;
                    .el-input{
                        height: 100%;
                        width: 100%;
                        input{
                            border-radius: 8px;
                            height: 100%;
                            border: 0px;
                            width: 100% !important;
                        }
                    }

                }
            }
        }
    }
    .form-group-addimg{
        position: absolute;
        right: 28px;
    }
    .box-wrap-lib-num{
        background: #FFFFFF;
        position: absolute;
        bottom: 28px;
        top: 202px;
        right: 28px;
        left: 28px;
        border-radius: 24px;
        width: auto !important;
        .box-wrap-lib-chile{
            width: 100%;
            height: 100%;
            .Table-up{
                width: 100%;
                height: 40%;
                border-radius: 8px 8px 0 0;
                background: #FFFFFF;
                .Table-up-sele{
                    display: flex;
                    padding: 8px;
                    .form-group-enquire{
                        width: 224px;
                        height: 32px;
                        margin-right: 16px;
                        .ivu-select-selection{
                            border-radius: 8px;
                        }
                        input{
                            border-radius: 8px;
                        }
                    }
                }
            }
            .staticData1{
                background: #FFFFFF;
                height: 60%;
                border-radius: 0 0 24px 24px;
                padding: 28px;
                width: auto !important;
                .vxe-grid{
                    height: 100%;
        
                    .vxe-grid--toolbar-wrapper{
                        display: none;
                    }
                    .vxe-table{
                        height: 100%;
        
                        .vxe-table--render-wrapper{
                            height: 100%;
                            .vxe-table--main-wrapper{
                                height: 100%;
                                .vxe-table--body-wrapper{
                                    height: 85% !important;
                                }
                            }
                        }
                    }
                    .vxe-grid--pager-wrapper{
                        display: none;
                        position: absolute;
                        bottom: 0;
                    }
                }
            }    

        }
    
    }    
}
.box-wrap-lib-num{
    .form-group-enquire{
        .el-select{
            width: 100%;
            height: 100%;
            .el-input{
                width: 100%;
                height: 100%;
                input{
                    height: 100%;
                }
            }
        }
    }
}
.box-wrap3{
    .box-operation3{
        .box-num{
            .box-selectnum{

            }
        }
    }
}

/*tab导航栏*/

.tabNav {
    position: relative;
    width: 100%;
    height: 50px;
    padding: 0 28px 0 28px;
    background: #fff;
    overflow: hidden; //margin折叠
}

.tabNav-wp {
    display: flex;
    align-items: center;
    height: 100%;
    overflow: hidden;
}

.acrossTab {
    width: auto;
    height: 32px;
    line-height: 32px;
    padding: 0 0 0 2px;
    background: none;
    transition: left 0.3s ease-in-out;
    white-space: nowrap;
}

.acrossTab li {
    display: inline-block;
    color: #6E747F;
    margin-right: 37px;
    cursor: pointer;
    span {
        font-size: 14px;
    }
}

.tab-circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #A5ADBD;
}

.active-circle {
    background: #0559FD;
}

.closeTab {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin: -2px 0 0 0;
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
    cursor: pointer;
    background: url(../images/peach-svg/Vector.svg) no-repeat 0 0;
    &:hover {
        background-position: 0 bottom;
    }
}
.three{
    width: 28px;
    height: 28px;    
    margin: 0 16px 0 8px;
    background: url(../images/peach-svg/del.svg) no-repeat 0 0;
}
.two{
    width: 28px;
    height: 28px; 
    margin-right: 8px;   
    background: url(../images/peach-svg/Status_Completed.svg) no-repeat 0 0;
}
.looklook{
    width: 28px;
    height: 28px; 
    margin: 0 16px 0 8px;
    background: url(../images/peach-svg/looklook.svg) no-repeat 0 0;
}
.quanxian{
    width: 28px;
    height: 28px; 
    margin-right: 8px;   
    background: url(../images/peach-svg/quanxian.svg) no-repeat 0 0;
}
.one{
    width: 28px;
    height: 28px;    
    margin-left: 8px;
    background: url(../images/peach-svg/one.svg) no-repeat 0 0;
}
.tabNav-more {
    position: absolute;
    right: 90px;
    top: 7px;
    overflow: hidden;
    .btn-a {
        padding: 0 8px;
        border-radius: 4px;
        overflow: hidden;
        display: inline-block;
        text-align: center;
        font-weight: 400;
        color: #9290ae;
        white-space: nowrap;
        vertical-align: middle;
        background-color: #e6e6e6;
        cursor: pointer;
        i {
            font-size: 14px;
        }
        &:hover {
            color: $fontHover-color;
            ;
        }
    }
}

@mixin dropdownCommon {
    width: 80px;
    height: 24px;
    line-height: 24px;
    position: absolute;
    display: inline-block;
    font-size: 0;
    text-align: center;
    button {
        vertical-align: middle;
    }
}

.skin-dropdown {
    z-index: 10;
    @include dropdownCommon;
    top: 24px;
    right: 5px;
    button {
        vertical-align: middle;
    }
}

.tabNav-dropdown {
    z-index: 9;
    @include dropdownCommon;
    top: 82px;
    right: 2px;
}

.dropdown-content {
    position: absolute;
    background-color: #f9f9f9;
    padding: 6px 0;
    min-width: 80px;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-ul {
    width: 100%;
    li {
        width: 100%;
        display: block;
        padding: 4px 6px;
        text-align: center;
        color: #495060;
        font-size: 12px;
        cursor: pointer;
        &:hover {
            background: #f3f3f3;
        }
    }
}

// 用户搜索添加布局
// .box-operation {
//     overflow: hidden; //消除margin折叠
// }

.box-search {
    // margin: 0 0 5px 0;
}

.box-add {
    text-align: right;
    margin: 5px;
    overflow: hidden;
}

.box-search,
.box-add {
    &>div {
        display: inline-block;
        margin-right: 16px;
    }
}

.form-group-enquire {
    // margin: 0 0 10px 0;
}

.form-group-add {
    margin: 0 5px;
    button {
        font-size: 14px;
        i {
            font-size: 16px;
        }
    }
}

.box-table {
    padding: 0 5px 0 0;
    font-size: 16px;
    td,
    th {
        text-align: center;
        color: #000000;
    }
}

.allCount {
    display: inline-block;
    margin: 0 0 10px 0;
    padding: 2px 6px;
    background: #e1e0ff;
    border-radius: 4px;
    span {
        color: #8a8fad;
        font-size: 14px;
    }
}

.handleHover {
    margin: 0 10px 0 0;
    cursor: pointer;
    vertical-align: middle;
    &:hover {
        opacity: 0.8;
    }
}

.ivu-table-cell {
    padding-left: 5px;
    padding-right: 5px;
}

.skin-btn{
    z-index: 999;
    width:40px;
    height: 30px;
    line-height: 30px;
    border: 0;
    border-radius: 4px;
    font-size: 16px;
    color:#ffffff;
    background: rgba(255,255,255,0.2);
    cursor: pointer;
  }
  .white-skin-btn{
    color:#c2c1ee;
    background: #f0efff;
  }
  .dropdown-ul .active-skin{
    color:#2db7f5;
  }
  // 混合器 管理员样式
  @mixin admin-style{
    height: 100%;
    // color:#fff;
    // background-color: rgba(255,255,255,0.2);
  }  
  .sectionList .ivu-transfer-list{
    width:400px;
    height:500px;
  }
  
  pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    }

    .vxe-table .vxe-cell{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .vxe-table .vxe-cell .el-tooltip{
        width: 100% !important;
    }
.vxe-grid--pager-wrapper{
    .vxe-pager--wrapper{
        .vxe-pager--jump-prev,
        .vxe-pager--prev-btn,
        .vxe-pager--next-btn,
        .vxe-pager--jump-next{
            border: none;
        }        
        .vxe-pager--total{
            color: #000000;
            font-size: 14px;
        }
        .vxe-pager--btn-wrapper{
            .vxe-pager--num-btn:not(.is--disabled).is--active{
                width: 24px;
                height: 24px;
                color: #0559FD !important;
                border: 1px solid #0559FD !important;
                background-color: unset !important;
                font-weight: 100;
                line-height: 1px;
            }
            .vxe-pager--num-btn {
                width: 24px;
                height: 24px;
                color: #000000 !important;
                border: 0 !important;
                background-color: unset !important;
                font-weight: 100;
                line-height: 1px;
            }
        }
        .vxe-pager--jump{
            .vxe-pager--goto{
                color: #060606;
                font-size: 14px;
                width: 44px;
                height: 24px;
                margin: 0 7px;
            }
            span{
                color: #A5ADBD;
                font-size: 14px;
            }
        }
        .vxe-select{
            .vxe-input{
                display: flex;
                height: 24px;
                width: 100px;                
                .vxe-input--inner{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .vxe-pager--jump-icon,.vxe-pager--btn-icon{
            color: #262626;
        }
    }
}
.vxe-pager.is--perfect{
    border: 0 !important;
    border-top-width: 0;
    background-color: #FFF !important;
}
.el-select .el-input .el-select__caret.is-reverse{
    display: flex;
    align-items: center;
    justify-content: center;
}
.el-select .el-input .el-select__caret{
    display: flex;
    align-items: center;
    justify-content: center;
}